<template>
<div class="chart-main">
    <div class="numberOne" ref="chart"></div>
    <div class="numberTwo" ref="chartTwo"></div>
    <div class="numberFour" ref="chartFour"></div>
    <div class="numberThree" ref="chartThree"></div>
    <div class="numberFive" ref="chartFive"></div>
</div>
</template>

<script>
const echarts = require('echarts');
export default {
    data() {
        return {
            deliveryNumberPosition: [],
            deliveryNumberCompany: [],
            userScore: [],
            averageSalaryCity: [],
            maxSalaryPosition: []
        };
    },
    methods: {
        // 加载投递次数前五职位
        queryDeliveryNumberPosition() {
            this.$axios.post('/delivery/queryDeliveryNumberPosition').then((res) => {
                this.deliveryNumberPosition = res.data.result;
            }).catch((error) => {
                console.log(error)
            })
        },
        // 加载投递次数前五的公司
        loadDeliveryNumberCompany() {
            this.$axios.post('/delivery/queryDeliveryNumberCompany').then((res) => {
                this.deliveryNumberCompany = res.data.result;
            }).catch((error) => {
                console.log(error);
            })
        },
        // 加载用户评分前五的职位
        loadUserScore() {
            this.$axios.post('/position/queryScorePosition').then((res) => {
                this.userScore = res.data.result;
            }).catch((error) => {
                console.log(error)
            })
        },
        // 加载平均薪资前五的城市
        loadAverageSalary() {
            this.$axios.post('/position/queryAverageCity').then((res) => {
                this.averageSalaryCity = res.data.result;
            }).catch((error) => {
                console.log(error)
            })
        },
        // 加载薪资最高的前五个职位
        loadMaxSalaryPosition() {
            this.$axios.post('/position/queryPositionMaxSalary').then((res) => {
                this.maxSalaryPosition = res.data.result;
            }).catch((error) => {
                console.log(error);
            })
        },
        initDeliveryNumberPositionCharts() {
            let myChart = echarts.init(this.$refs.chart);
            // 绘制图表
            myChart.setOption({
                color: ['#61a0a8', '#d48265', '#91c7ae'],
                title: {
                    text: '热门职位'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.deliveryNumberPosition.map(it => it.name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '投递次数',
                    type: 'bar',
                    data: this.deliveryNumberPosition.map(it => it.number)
                }]
            });
        },
        // 画投递次数前五的公司
        initDeliveryNumberCompany() {
            let myChart = echarts.init(this.$refs.chartTwo);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '热门公司'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.deliveryNumberCompany.map(it => it.company)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '投递次数',
                    type: 'bar',
                    data: this.deliveryNumberCompany.map(it => it.number)
                }]
            });
        },
        // 画用户评分前五的职位
        initUserScoreCharts() {
            let myChart = echarts.init(this.$refs.chartThree);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '推荐评分最高职位'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.userScore.map(it => it.name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '分数',
                    type: 'line',
                    data: this.userScore.map(it => it.score)
                }]
            });
        },
        // 画平均薪资最高的前五个城市
        initAverageSalaryCity() {
            let myChart = echarts.init(this.$refs.chartFour);
            // 绘制图表
            myChart.setOption({
                color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                title: {
                    text: '平均薪资最高城市'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.averageSalaryCity.map(it => it.paddress)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '平均薪资',
                    type: 'line',
                    data: this.averageSalaryCity.map(it => it.average)
                }]
            });
        },
        // 画薪资最高的前五个职位
        initMaxSalary() {
            let myChart = echarts.init(this.$refs.chartFive);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '薪资最高职位'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.maxSalaryPosition.map(it => it.name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '薪资详情',
                    type: 'bar',
                    data: this.maxSalaryPosition.map(it => it.maxSalary)
                }]
            });
        }
    },
    mounted() {
        setTimeout(() => {
            this.initDeliveryNumberPositionCharts();
            this.initDeliveryNumberCompany();
            this.initUserScoreCharts();
            this.initAverageSalaryCity();
            this.initMaxSalary();
        }, 1000);
    },
    created() {
        this.queryDeliveryNumberPosition();
        this.loadDeliveryNumberCompany();
        this.loadUserScore();
        this.loadAverageSalary();
        this.loadMaxSalaryPosition();
    }
}
</script>

<style>
.chart-main {
    display: flex;
    flex-wrap: wrap;
}

.numberOne {
    width: 1105px;
    height: 265px;
    background-color: aliceblue;
}

.numberTwo {
    margin-top: 5px;
    width: 535px;
    height: 265px;
    background-color: aliceblue;
}

.numberThree {
    margin-top: 5px;
    width: 1105px;
    height: 265px;
    background-color: aliceblue;
}

.numberFour {
    margin-left: 17px;
    margin-top: 5px;
    width: 535px;
    height: 265px;
    background-color: aliceblue;
}

.numberFive {
    margin-top: 5px;
    width: 1105px;
    height: 265px;
    background-color: aliceblue;
}
</style>
